<template>
	<view>
		  <uni-search-bar @confirm="search" @input="inputs" :cancelButton="none " :radius='40'></uni-search-bar>
      <!-- 搜索建议列表-->
     <view class="sugg-list">
       <view class="sugg-item"  v-for="(item, i) in searchList" :key="i" @click="gotoDetail(item.goods_id)">
         <view class="goods-name">{{item.goods_name}}</view>
         <uni-icons type="arrowright" size="16"></uni-icons>
       </view>
     </view>
     <!-- 历史记录区域-->
     <view class="history_container" v-if="searchList.length==0">
       <text>搜索历史</text>
       <uni-icons type="trash" @click="historyList=''" size="12"></uni-icons>
          <i></i>
        <view class="tags_box">
          <uni-tag @click="to_goodsList(item)" :text="item" type="default" :circle="true" inverted v-for="(item,i) in historyList" :key='i'></uni-tag>
        </view>
     </view>
   
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchList:[],
        kw:'',
        historyList:[],
        timer:null
			};
		},
    created(){
     if(uni.getStorageSync('historyList')){
       this.historyList= uni.getStorageSync('historyList');
     }
    },
    methods:{
      inputs(e){
        var that=this
       clearTimeout(this.timer)
      this.timer=setTimeout(()=>{
        that.kw=e.value
        that.getSearchList()
        that.historyList.unshift(that.kw)
        that.historyList=[...new Set(that.historyList)]
        uni.setStorageSync('historyList',that.historyList)
      },500)
      },
     async getSearchList(){
        if(this.kw.length!=0){
          const {data:res}=await uni.$http.get('/api/public/v1/goods/search',this.kw)
          if(res.meta.status!=200) uni.$showMsg('查询数据失败！')
          uni.$showMsg('查询数据成功！')
          this.searchList=res.message.goods
          console.log('searchLIsh',this.searchList)
        }else{
          this.searchList=[]
        }
      },
      gotoDetail(ids){
        uni.navigateTo({
          url:"/subpkg/goods_detail/goods_detail?goodsId="+ids
        })
      },
      to_goodsList(item){
        uni.navigateTo({
          url:"/subpkg/goods_list/goods_list?query="+item
        })
      }
    }
	}
</script>

<style lang="scss">
.sugg-list {
  padding: 0 5px;

  .sugg-item {
    font-size: 12px;
    padding: 13px 0;
    border-bottom: 1px solid #efefef;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .goods-name {
      // 文字不允许换行（单行文本）
      white-space: nowrap;
      // 溢出部分隐藏
      overflow: hidden;
      // 文本溢出后，使用 ... 代替
      text-overflow: ellipsis;
      margin-right: 3px;
    }
  }
}
.history_container{
  display: flex;
  padding: 0 2px;
  font-size: 12px;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 5px;
  i{
    height: 1px;
    background-color: #f1f1f1;
    width: 100%;
    margin-top: 4px;
    margin-left: 2px;
    margin-right: 2px;
  }
  .tags_box{
    display: flex;
    flex-wrap: wrap;
    .uni-tag{
      margin-right: 10px;
    }
   }
}

</style>
